<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Bootstrap 实例</title>

	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
	 crossorigin="anonymous">

</head>

<body>
	<section class="container">
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">简单的卡片</h5>
			</div>
			<div class="card-body d-flex">
				<div class="col-6">
					<div class="card">
						<div class="card-body">卡片</div>
					</div>
				</div>
				<div class="col-6">
					<div class="card">
						<div class="card-body">卡片</div>
					</div>
				</div>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">有头部和底部的卡片</h5>
			</div>
			<div class="card-body d-flex">
				<div class="col-md-6">
					<div class="card">
						<div class="card-header">头部</div>
						<div class="card-body">内容</div>
						<div class="card-footer">底部</div>
					</div>
				</div>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">多种颜色卡片</h5>
			</div>
			<div class="card-body d-flex">
				<div class="col-md-6">
					<div class="card">
						<div class="card-body">Basic card</div>
					</div>
					<br>
					<div class="card bg-primary text-white">
						<div class="card-body">Primary card</div>
					</div>
					<br>
					<div class="card bg-success text-white">
						<div class="card-body">Success card</div>
					</div>
					<br>
					<div class="card bg-info text-white">
						<div class="card-body">Info card</div>
					</div>
					<br>
					<div class="card bg-warning text-white">
						<div class="card-body">Warning card</div>
					</div>
					<br>
					<div class="card bg-danger text-white">
						<div class="card-body">Danger card</div>
					</div>
					<br>
					<div class="card bg-secondary text-white">
						<div class="card-body">Secondary card</div>
					</div>
					<br>
					<div class="card bg-dark text-white">
						<div class="card-body">Dark card</div>
					</div>
					<br>
					<div class="card bg-light text-dark">
						<div class="card-body">Light card</div>
					</div>
				</div>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">标题、文本和链接</h5>
			</div>
			<div class="card-body d-flex">
				<div class="col-6">
					<div class="card">
						<div class="card-body">
							<h4 class="card-title">Card title</h4>
							<p class="card-text">Some example text. Some example text.</p>
							<a href="#" class="card-link">Card link</a>
							<a href="#" class="card-link">Another link</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">图片卡片</h5>
			</div>
			<div class="card-body d-flex">
				<div class="col-6">
					<div class="card">
						<img class="card-img-top" src="img_avatar.png" alt="Card image">
						<div class="card-body">
							<h4 class="card-title">John Doe</h4>
							<p class="card-text">Some example text.</p>
							<a href="#" class="btn btn-primary">See Profile</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">文字覆盖图片</h5>
			</div>
			<div class="card-body d-flex">
				<div class="col-6">
					<div class="card img-fluid">
						<img class="card-img-top" src="img_avatar.png" alt="Card image" style="width:100%">
						<div class="card-img-overlay">
							<h4 class="card-title">John Doe</h4>
							<p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some
								example text some example text.</p>
							<a href="#" class="btn btn-primary">See Profile</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
</body>

</html>